<!DOCTYPE html>
<html>

<head>
    <title> </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
        body {
            font-family: '黑体';
            font-size: 24px;
            color: black;
            margin: 0;
            padding: 0;
        }

        .div-card {
            margin: 0;
            padding: 0;
            text-align: center;
            position: relative;
            page-break-after: always;
            width: 140mm;
            padding-top: 5mm;
            padding-left: 5mm;
            height: 200mm;

        }

        .div-foot,
        .div-foot-l {
            font-size: 18px;
        }

        .div-foot {
            margin-top: 14mm;
            float: right;
            margin-right: 20mm;
            text-align: left;

        }

        .div-foot div {
            margin-bottom: 4mm;

        }

        .div-foot-l {
            margin-top: 20mm;
            float: left;
            margin-left: 10mm;
            border: 1px solid black;
            padding: 0mm 15mm 5mm 3mm;
        }

        .div-foot-l div {
            text-align: left;
            font-weight: bold;
            margin-bottom: 4mm;


        }

        .div-foot-l div,
        .div-foot div {
            height: 6mm;
            line-height: 6mm;
        }

        .div-foot-l div p,
        .div-foot div p {
            text-align: left;
            padding: 0 0 0 1mm;
            display: inline-block;
            border-bottom: 1px solid rgb(0, 0, 0);
            width: 20mm;

        }

        .div-foot-l div p span,
        .div-foot div p span {
            font-weight: bold;
            padding: 0 2mm;
        }

        .div-title {
            margin: 6mm 0 7mm;
            text-align: center;
            font-size: 30px;
            font-weight: 600;
        }

        table {
            border-collapse: collapse;
            margin: 0mm 10mm 0;
        }

        table tr td {
            height: 10mm;
        }

        .table_div_content tr td {
            font-size: 16px;
            height: auto;

        }

        .table_div_content tr td div {
            display: inline-block;
            width: auto;
        }


        .table_div_content tr {
            margin-bottom: 5mm;
            height: 7mm;
        }

        .span-margin {
            margin-right: 15px;
        }



        @media print {
            body {
                -webkit-print-color-adjust: exact;
            }
        }
    </style>

    <style type="text/css" media="print">
        @page {
            margin: 0;
            size: A5 portrait;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="div-card" v-for="(tableinfo,aIndex) in tableData">
            <div class="div-title">
                <div>{{info.companyname}}医务室处方笺</div>
            </div>
            <div class="table_div_content">
                <table border="0">
                    <tr row="3">
                        <td style="width: 150mm;text-align: left;"> 开方日期:<div style="border-bottom: 1px solid #000000;">
                                <span>{{
                                    dateformat(info.order.OrderDate,'yyyyMMdd')}}</span>
                            </div>
                        </td>
                        <td></td>
                        <td style="text-align:left;font-size:12px;margin-top: 1.4mm;">
                            NO:<div style="border-bottom: 1px solid #000000;"><span>{{info.order.OrderNo}}</span></div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 80mm;text-align: left;">
                            姓名:<div style="border-bottom: 1px solid #000000;"><span>{{info.displayName}}</span></div>
                        </td>
                        <td style="width: 80mm;text-align: left;">
                            性别:<div style="border-bottom: 1px solid #000000;">
                                <span>{{info.order.Customer.Sex>1?'女':'男'}}</span>
                            </div>
                        </td>
                        <td style="width: 80mm;text-align: left;">
                            年龄:<div style="border-bottom: 1px solid #000000;"><span>{{info.order.CustomerAge}}</span>
                            </div>
                        </td>
                    </tr>
                    <tr row="2">
                        <td style="text-align: left;">部门:<div style="border-bottom: 1px solid #000000;">
                                <span>{{info.order.Customer.Department.Name}}</span>
                            </div>
                        </td>
                        <td style="width:140mm;text-align: left;">
                            医保号:<div style="border-bottom: 1px solid #000000;">
                                <span>{{info.order.Customer.MedicalCardNo}}</span>
                            </div>
                        </td>
                    </tr>
                </table>
                <table border="0">
                    <tr>
                        <td style="width: 80mm;text-align: left;"> 临床（初步）诊断:</td>
                    </tr>
                    <tr>
                        <td style=" width: 200mm; text-align: left;">{{info.order.Remark}}</td>
                    </tr>
                </table>
            </div>
            <div class="table_div_content">
                <table border="0">
                    <tr>
                        <td style="width: 115mm;"></td>
                        <td style="width: 40mm;"></td>
                        <!-- <td style="width: 20mm;">单位</td> -->
                        <!-- <td style="width: 25mm;">单价(元)</td> -->
                        <td style="width:30mm;"></td>
                    </tr>
                    <tr v-for="(item,index) in tableinfo" :key="item.Id">
                        <td style="text-align:left;">{{ aIndex*8 + index+1}}.{{item.ProductName}}
                        </td>

                        <td>{{item.Num}}{{item.Unit}}</td>
                        <!-- <td>{{item.Unit}}</td> -->
                        <!-- <td>{{item.Price}}</td> -->
                        <td>{{item.Amount}}</td>
                    </tr>
                    <template v-if="tableinfo.length<8">
                        <tr v-for="item in (8-tableinfo.length)" :key="item">
                            <td></td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                        </tr>
                    </template>
                    <!-- <tr>
						<td rowspan="2" colspan="2">合计</td>
						<td colspan="7">
							<span class="span-margin">合计:{{info.order.Amount}}元</span>
						</td>
					</tr> -->
                </table>
            </div>
            <div class="div-foot-l">
                <div>药&nbsp;费:<p style="font-weight:bold;"><span>{{info.order.Amount}}</span></p>
                </div>
                <div>治疗费:<p><span></span></p>
                </div>
            </div>
            <div class="div-foot">
                <div>医&nbsp;生:<p><span>{{info.createName}}</span></p>
                </div>
                <div>取药人:<p><span></span></p>
                </div>
                <div>审核人:<p><span>{{info.reviewerName}}</span></p>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/vue.min.js"></script>
    <script language="javascript" type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                info: {
                    printtag: [],
                    order: {
                        CustomerBalance: 0,
                        Amount: 0,
                        FreightFee: 0,
                        EditionFee: 0,
                        GiveupFee: 0,
                        AllFee: 0,
                    },
                    detail: [],
                    displayName: '',
                    createName: '',
                    reviewerName: ''
                },

            },
            computed: {
                currentBalanceShow() {
                    var currentBalance = (Number(this.info.order.CustomerBalance) - Number(this.info.order.AllFee) + Number(this.info.order.PayFee))
                    if (currentBalance <= 0) {
                        return '当前欠款：' + Number(Math.abs(currentBalance).toFixed(2))
                    } else {
                        return '当前结余：' + Number(Math.abs(currentBalance).toFixed(2))
                    }
                },
                currentMoneyShow() {
                    var currentBalance = (Number(this.info.order.CustomerBalance) - Number(this.info.order.AllFee) + Number(this.info.order.PayFee))
                    if (currentBalance <= 0) {
                        return '总计金额：' + Number(Math.abs(currentBalance).toFixed(2))
                    } else {
                        return '结余金额：' + Number(Math.abs(currentBalance).toFixed(2))
                    }
                },
                lastBalanceShow() {
                    if (this.info.order.CustomerBalance <= 0) {
                        return '上次欠款：' + Math.abs(this.info.order.CustomerBalance)
                    } else {
                        return '上次结余：' + this.info.order.CustomerBalance
                    }

                },
                printtags() {
                    let index = 1;
                    let count = 2;
                    let arrTemp = [];
                    if (this.info.printtag.length > 1) {
                        for (let i = 0; i < this.info.printtag.length; i++) {
                            index = parseInt(i / count);
                            if (arrTemp.length <= index) {
                                arrTemp.push([]);
                            }
                            arrTemp[index].push(this.info.printtag[i])
                        }
                    }
                    return arrTemp
                },
                tableData() {
                    let index = 0;
                    let count = 8;
                    let arrTemp = [];

                    for (let i = 0; i < this.info.detail.length; i++) {
                        index = parseInt(i / count);
                        if (arrTemp.length <= index) {
                            arrTemp.push([]);
                        }
                        arrTemp[index].push(this.info.detail[i])
                    }
                    return arrTemp
                }
            },
            methods: {
                // 根据出生日期获取年龄
                getAge(vl) {
                    if (vl) {
                        let birthdays = new Date(vl.replace(/-/g, "/"));
                        let d = new Date();
                        let age =
                            d.getFullYear() -
                            birthdays.getFullYear() -
                            (d.getMonth() < birthdays.getMonth() ||
                                (d.getMonth() == birthdays.getMonth() &&
                                    d.getDate() < birthdays.getDate())
                                ? 1
                                : 0);
                        return age
                    }
                },
                noPassByName(str) {
                    if (null != str && str != undefined) {
                        if (str.length <= 3) {
                            return str.substring(0, 1) + "*";
                        } else {
                            return str.substring(2, 2) + "**";
                        }
                    } else {
                        return "";
                    }
                },
                dateformat(dtStr, fmt) { //author: meizz 
                    if (!dtStr) {
                        return "";
                    }
                    if (dtStr.indexOf('年') > -1 && dtStr.indexOf('-') < 0) {
                        return dtStr;
                    }
                    var dt = new Date(dtStr);
                    var o = {
                        "M+": dt.getMonth() + 1, //月份 
                        "d+": dt.getDate(), //日 
                        "h+": dt.getHours(), //小时 
                        "m+": dt.getMinutes(), //分 
                        "s+": dt.getSeconds(), //秒 
                        "q+": Math.floor((dt.getMonth() + 3) / 3), //季度 
                        "S": dt.getMilliseconds() //毫秒 
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
                            "00" + o[k])
                            .substr(("" + o[k]).length)));
                    return fmt;
                }
            }
        });
        function printData(info) {
            app.info = info;
            setTimeout(() => {
                window.print();
            }, 500)
        }
    </script>
</body>

</html>
